<template>
  <div class="algorighmmain" v-if="AlgorithmShow">
    <div class="algorighm-top" >
        <el-tabs v-model="algorighmactive" @tab-click="algorighmatypeClick" style="margin-top:10px;" >
            <el-tab-pane  :name="item.name" v-for="(item,index) in algorighmtype" :key="item+index">
                <span slot="label"><i :class="setClass(item.img)" style="font-size:20px;margin-right:10px;"></i>{{item.label}}</span> 
            </el-tab-pane>
            
        </el-tabs>
        <el-tabs v-model="ChildType" @tab-click="ChildTypeClick" >
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in childtype" :key="item+index">
            </el-tab-pane>
        </el-tabs>
        <i class="el-icon-close closealgorighm" @click="closealgorighm"></i>
    </div>
    <div class="algorighm-bottom">
        <ul class="infoli">
            <li @click="infoclick(index)" v-for="(item,index) in typedata" :key="item+index" :class="{infoactive:item.isshow}" >
                <el-row :gutter="20">
                    <el-col :span="2">
                        <div class="infoindex" >
                            {{index+1}}
                        </div>
                    </el-col>
                    <el-col :span="13">
                        <span style="color:#409EFF;font-size: 14px;">节点名称：{{item.name}}</span>
                        <div style="color:#fff;font-size: 12px; margin-top:5px;">重 数：{{item.a}}</div>
                        <div style="color:#fff;font-size: 12px; margin-top:5px;">重要性：{{item.b}}</div>
                        <div style="color:#fff;font-size: 12px; margin-top:5px;">代 价：{{item.c}}</div>
                        <div style="color:#fff;font-size: 12px; margin-top:5px;">时 延：{{item.d}}</div>
                    </el-col>
                    <el-col :span="5">
                        <img :src="item.img" alt="" srcset="" style="width:80px;height:80px;">
                    </el-col>
                </el-row>
            </li>
        </ul>
        <div class="pagecenter">
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :current-page.sync="algocurrentPage"
                :page-size="algosize"
                :total="algototal"
                >   
            </el-pagination>
        </div>
    </div>
  </div>
</template>

<script lang='ts'>
import  {Component ,Vue} from 'vue-property-decorator'
import {mapGetters} from 'vuex'

@Component({
    computed:{
          ...mapGetters(['AlgorithmShow'])
    }
})
export default class Algorithm extends Vue {
    private algorighmactive:string='first'
    private ChildType:string='first'
    private algorighmtype:Array<any>=[
        {
            label:"关键节点标绘",
            img:"el-icon-location-outline",
            name:"first",
        },{
            label:"关键链路标绘",
            img:"el-icon-link",
            name:"second",
        },{
            label:"关键路径标绘",
            img:"el-icon-connection",
            name:"third",
        },{
            label:"路径规划",
            img:"el-icon-share",
            name:"fourth",
        },{
            label:"导航规划",
            img:"el-icon-s-operation",
            name:"five",
        }
    ]
    private childtype:Array<any>=[
        {
            label:'多属性排序',
            name:'first'
        },{
            label:'介数中心性',
            name:'second'
        },{
            label:'特征向量中心性',
            name:'third'
        },{
            label:'紧密中心性',
            name:'fourth'
        },{
            label:'H-index',
            name:'five'
        }
    ]

    private typedata:Array<any>=[
        {
            name: `xxxxxxx光纤站1`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            a:5,
            b:8,
            c:3.333,
            d:8.888,
            img: require('../../../public/img/ps_logo2.png'),
            point: [116.403874, 39.932153],
            isshow:false,
          },
          {
            name: `xxxxxxx光纤站2`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            a:5,
            b:8,
            c:3.333,
            d:8.888,
            img: require('../../../public/img/ps_logo2.png'),
            point: [100.403874, 34.932153],
            isshow:false,
          },
          {
            name: `xxxxxxx光纤站3`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            a:5,
            b:8,
            c:3.333,
            d:8.888,
            img: require('../../../public/img/ps_logo2.png'),
            point: [112.403874, 30.932153],
            isshow:false,
          },
          {
            name: `xxxxxxx光纤站4`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            a:5,
            b:8,
            c:3.333,
            d:8.888,
            img: require('../../../public/img/ps_logo2.png'),
            point: [119.403874, 29.932153],
            isshow:false,
          },
          {
            name: `xxxxxxx光纤站5`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            a:5,
            b:8,
            c:3.333,
            d:8.888,
            img: require('../../../public/img/ps_logo2.png'),
            point: [110.403874, 39.932153],
            isshow:false,
          }
    ]

    private algocurrentPage:number=1
    private algosize:number=6
    private algototal:number=12
    private setClass(key:string) {   //动态绑定class
        let obj:any = {}
        obj[`${key}`] = true
        return obj
    }

    public mounted() {
        this.$bus.$on('clickmenu',(index:string)=>{
            this.algorighmactive=index
        })
    }

    private algorighmatypeClick(){ //算法类型点击事件
        
    }

    private ChildTypeClick(){    //算法的点击事件

    }

    private closealgorighm(){
        this.$store.commit('SET_ALGO_SHOW',false)
        this.$bus.$off('clickmenu')
    }

    private infoclick(index:number){
        this.typedata[index].isshow=!this.typedata[index].isshow
    }
}   
</script>

<style lang='scss' >
    .algorighmmain{
        .algorighm-top{
            border:1px solid #174392;
            background:rgba(21, 54, 87,0.5);
            position: relative;
            .closealgorighm{
                font-size: 18px;
                position: absolute;
                right: 0px;
                top:0px;
                color: #fff;
                cursor: pointer;
            }
        }
        .algorighm-bottom{
            margin-top:10px;
            border:1px solid #174392;
            background:rgba(21, 54, 87,0.5);
            ul{
                margin: 0;
            }
            .infoli>li{
                font-size: 12px;
                padding: 10px 5px;
            }
            .infoli>li:hover{
                background:rgba(64, 158, 255,0.5);
            }
            .infoactive{
                background:rgba(64, 158, 255,0.5);
            }
        }
        .pagecenter{
            border-top:1px solid #174392;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }
        .infoindex{
            background: url(/img/markers.png);
            height: 28px;
            width: 24px;
            background-position:-225px -189px;
            display: flex;
            justify-content: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }
    }
    .el-tabs__nav-wrap::after{
     background-color: #174392
    }
    .el-tabs__item{
        color: #fff
    }
    .el-tabs__nav-next, .el-tabs__nav-prev{
        color: #fff
    }
</style>    